<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="../js/prop-types.js"></script>


    <script type="text/babel">

        // 多个Provider
        const MoneyContext = React.createContext(0)
        const HouseContext = React.createContext('')

        class F extends React.Component {
            state = { money: 50, house: 'apartment' }

            render() {
                return (
                    <MoneyContext.Provider value={this.state.money}>
                        <HouseContext.Provider value={this.state.house}>
                            <S />
                        </HouseContext.Provider>
                    </MoneyContext.Provider>
                )
            }
        }

        // 函数组件和类组件一样
        // class S extends React.Component{
        //     render(){
        //         return (
        //             <MoneyContext.Consumer >
        //                 {
        //                     (money)=>{
        //                         return (
        //                             <HouseContext.Consumer>
        //                                 {
        //                                     (house)=>{
        //                                         return (

        //                                             <div>
        //                                                 <p>son : father money : {money}</p>
        //                                                 <p>son : father house : {house}</p>
        //                                             </div>
        //                                         )
        //                                     }
        //                                 }
        //                             </HouseContext.Consumer>
        //                         )
        //                     }
        //                 }
        //             </MoneyContext.Consumer>
        //         )
        //     }
        // }


        // MyClass.contextType = MyContext;
        
        class S extends React.Component {
            // this.context  = MoneyContext.Provider 提供的value的值
            // this.context = value1 (money)
            static contextType = MoneyContext

            // this.context  = HouseContext.Provider 提供的value的值
            // this.context = value2 (house)
            // 注意：覆盖问题 所以使用 : 使用一个context ; 如果是多个context 后面回覆盖前面 ；
            // static contextType  = HouseContext

            // 只能是类组件使用，函数组件不能使用 因为没有this.context

            render() {
                const money = this.context

                {/*
                    return (
                   <HouseContext.Consumer>
                       {
                           (house)=>{
                               return (

                                   <div>
                                       <p>son : father money : {money}</p>
                                       <p>son : father house : {house}</p>
                                   </div>
                               )
                           }
                       }
                   </HouseContext.Consumer>
                   )
               */}
                return (

                    <div>
                        <p>son : father money : {money}</p>

                        <HouseContext.Consumer>
                            {
                                (house) => {
                                    return <p>son : father house : {house}</p>
                                }
                            }
                        </HouseContext.Consumer>
                    </div>
                )
            }
        }

        ReactDOM.render(<F />, document.getElementById('app'))
    </script>
</body>

</html>